import * as React from 'react';
import { useMemo } from 'react';
import classNames from 'classnames';

export interface BadgeProps {
	children?: React.ReactNode;
	className?: string;
	count?: React.ReactNode;
	overflowCount?: number;
	showZero?: boolean;
	style?: React.CSSProperties;
	size?: string;
	title?: string;
}

const Badge: React.FC<BadgeProps> = props => {
	const prefixCls = 'bh-badge';
	const {
		children,
		className,
		count,
		overflowCount = 99,
		showZero = false,
		style,
		size = 'default',
		title,
		...restProps
	} = props;
	const classString1 = classNames(
		prefixCls,
		className,
		{
			[`${prefixCls}-not-a-wrapper`]: !children,
		}
	);
	const classString2 = classNames(
		`${prefixCls}-count`,
		{
			[`${prefixCls}-count-sm`]: size === 'small',
		}
	);
	
	const titleNode:any = title || count || undefined;
	const isHidden = useMemo(() => {
		if(!showZero && count == 0) {
			return true;
		}

		return false;
	}, [count, showZero]);

	let displayCount = '';
	let count1 = Number(count);
	if(count1 > overflowCount) {
		displayCount = overflowCount + '+';
	}else {
		displayCount = count + '';
	}
	
	return (
		<span className={classString1} {...restProps}>
		    {children}{isHidden}
		    {!isHidden && <sup className={classString2} style={style} title={titleNode}>{displayCount}</sup>}
		</span>
	)
};

export default Badge;